iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 18

[想試試看JavaScript ] 為什麼需要這麼多種註冊事件處理的方式

  • 分享至 

  • xImage
  •  

為什麼需要這麼多種註冊事件處理的方式?

上一篇提到註冊事件的方式有三種
1.HTML 屬性
2.DOM 屬性
3.addEventListener()

那這三種有什麼差異呢?

主要的差異是越後面的寫法其實寫起來越長越複雜

既然寫起來比較複雜,為什麼會用比較複雜的寫法呢?

當網站比較複雜,就會採用 DOM 屬性addEventListener 的寫法
我們寫網站時,不只會希望寫出功能,也希望在修改的時候會很方便。
所以為了閱讀的方便,會習慣將 HTML 與 Javascript 分開來寫,HTML 只負責放資料,Javascript 負責處理資料與製作功能。
使用 HTML 屬性的寫法會將資料與功能都寫在一起閱讀起來很不方便。

不過實際上寫網站也比較少用 DOM 屬性的寫法,為什麼呢?
因為 HTML 屬性DOM 屬性的寫法,同樣的事件,註冊事件只能註冊一次如果重複註冊事件就會也只會註冊一次。
可以試一下下面的程式碼,可以發現只有 addEventListener 可以重複註冊 click 事件

<html>
<head>
<script>

</script>
</head>
<body>
    <button id="btn" onclick="alert('click1');" onclick="alert('click2';)">Click</button>
<script>
var btn=document.getElementById("btn"); // 得到 button 標籤放進變數 btn 裡
btn.onclick=function(){
    alert('onclick1');
};
btn.onclick=function(){alert('onclick2')};
btn.addEventListener('click',function(){alert('adclick1')});
btn.addEventListener('click',function(){alert('adclick2')});
</script>
</body>
</html>

總結

誰可以寫在 Javascript?

HTML 屬性只能寫在 HTML
DOM 屬性addEventListener 可以寫在 Javascript

誰可以重複註冊相同事件

addEventListener 可以


上一篇
[想試試看JavaScript ] 事件處理
下一篇
[想試試看JavaScript ] 各種事件處理
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言